<template>
  <!--ASN明细-->
  <div class="adjust-detail-wrap">
    <div class="info-wrap">
      <p class="tit">{{ $t('ex.adjustInfo') }}</p>
      <g-details :detailData="data.detailData" :inputConfig="inputConfig" :rules="rules" ref="input"
        @pop="setdata" style="padding:10px"></g-details>
    </div>

    <div class="editor-group" v-show="showSerialList">
      <p class="tit">{{ $t('ex.serialInfo') }}<el-button style="float:right" type="text" @click="handleAddSerial">{{ $t('ex.serialAdd') }}</el-button></p>
      <div class="editor-content"  style="padding:10px">
        <el-table stripe border :data="serialList" :max-height="calcHeight(400)">
          <el-table-column type="index" :label="$t('app.index')" width="55"></el-table-column>
          <el-table-column prop="serialNumber" :label="$t('config.serialNo')">
            <template slot-scope="{row,$index}">
              <el-input v-model="row.serialNumber" @input="change(row,$index)"></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="serialNumberUnit" :label="$t('wave.totaleaches')" width="55"></el-table-column>
          <el-table-column prop="adjustmentCategory" :label="$t('common.type')" width="80">
            <template slot-scope="{row}">
              <span v-if="row.adjustmentCategory == 14101">{{ $t('ex.serial1') }}</span>
              <span v-else-if="row.adjustmentCategory ==14102">{{ $t('ex.serial2') }}</span>
              <span v-else-if="row.adjustmentCategory ==14103">{{ $t('ex.serial3') }}</span>
              <span v-else-if="row.adjustmentCategory ==14104">{{ $t('ex.serial4') }}</span>
            </template>
          </el-table-column>
          <el-table-column :label="$t('transmit.action')" width="80">
            <template slot-scope="{row,$index}">
              <el-button type="text" v-if="row.adjustmentCategory == 14101" @click="remove1(row)">{{ $t('ex.remove') }}</el-button>
              <el-button type="text" v-else-if="row.adjustmentCategory == 14102" @click="remove2(row,$index)">{{ $t('ex.remove') }}</el-button>
              <el-button type="text" v-else-if="row.adjustmentCategory == 14103" @click="revocation(row)">{{ $t('ex.revocation') }}</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>

import details from 'commons/Detail'
import baseMixin from "@/mixins/BaseMixin";

export default {
  name: "adjustmentDetails",
  mixins: [baseMixin],
  props: {
    data: {
      type: Object
    },
    serialArr:{
      type:Array
    }
  },
  data() {
    return {
      rules: {
        adjustmentlinenumber: [
          { required: true, trigger: 'blur' },
        ],
        lot: [
          { required: true, trigger: 'blur' },
        ],
        reasoncode: [
          { required: true, trigger: 'blur' },
        ],
        sku: [
          { required: true, trigger: 'blur' },
        ],
        loc: [
          { required: true, trigger: 'blur' },
        ],
        packkey: [
          { required: true, trigger: 'blur' },
        ],
        qty: [
          { required: true, trigger: 'blur' },
        ],
        uom: [
          { required: true, trigger: 'blur' },
        ],
        adjustmentType: [
          { required: true, trigger: 'blur' },
        ]
      },
      addflag: true,
      serialList:[],
      showSerialList:false,
    }
  },
  computed: {
    inputConfig() {
      return [
          {
            type: "input",
            label: this.$t('outbound.userlinenumber'),
            props: "adjustmentlinenumber",
            disabled: true
          },
          {
            type: "table",
            label: this.$t('config.sku'),
            props: "sku",
            tableConfig: [
              {
                label: this.$t('config.sku'),
                prop: "sku",
                input: "input",
              },
              {
                label: this.$t('config.shipper'),
                prop: "storerkey",
                input: "input",
              },
              {
                label: this.$t('in.lot'),
                prop: "lot",
                input: "input",
              },
              {
                label: this.$t('config.loc'),
                prop: "loc",
                input: "input",
              },
              {
                label: this.$t('in.lpn'),
                prop: "id",
                input: "input",
              },
              {
                label: this.$t('config.num'),
                prop: "qty",
                input: "input",
              },
              {
                label: this.$t('ex.qtyallocated'),
                prop: "qtyallocated",
                input: "input",
              },
              {
                label: this.$t('outbound.qtypicked'),
                prop: "qtypicked",
                input: "input",
              },
              {
                label: this.$t('in.totalqtyexpected'),
                prop: "qtyexpected",
                input: "input",
              },
            ],
            url: `/querylotxlocidOfStorerkey/?/${this.$store.state.wms}/${this.$parent.$parent.$refs.detail.detailData.storerkey}`,
            disabled: this.addflag||this.$parent.isInventoryAdd,
            filterKey:"sku"
          },
          {
            type: "select",
            label: this.$t('ex.reasoncode'),
            props: "reasoncode",
            options: this.getOptions("querycodeLkup/ADJREASON"),
          },
          {
            type: "select",
            label: this.$t('ex.adjustmentType'),
            props: "adjustmentType",
            options: this.getOptions("querycodeLkup/AdjustmentType"),
            disabled: this.showSerialList
          },
          {
            type: "input",
            label: this.$t('in.adjustmentqty'),
            props: "qty",
            disabled: this.showSerialList,
            break:true
          },
          {
            type: "input",
            label: this.$t('out.lot'),
            props: "lot",
            disabled: true
          },
          {
            type: "input",
            label: this.$t('in.lpn'),
            props: "id",
            disabled: true
          },
          
          {
            type: "input",
            label: this.$t('config.loc'),
            props: "loc",
            disabled: true
          },
          {
            type: "select",
            label: this.$t('config.packaging'),
            props: "packkey",
            options: this.getOptions("queryPackDropDown"),
            disabled: true
          },
          {
            type: "input",
            label: this.$t('ex.currentqty'),
            props: "currentqty",
            disabled: true,
            break:true
          },
          {
            type: "select",
            label: this.$t('config.measureUnit'),
            props: "uom",
            options: this.getOptions(`queryFfdefaultuomDropDown/${this.data.detailData.packkey}`),
            disabled: true
          },
          {
            type: "input",
            label: this.$t('ex.actualnetwgt'),
            props: "actualnetwgt",
            disabled: true
          },
          {
            type: "input",
            label: this.$t('ex.adjnetwgt'),
            props: "adjnetwgt",
            disabled: true
          },
          {
            type: "input",
            label: this.$t('ex.targetadj'),
            props: "targetadj",
            disabled: true
          },
          {
            type: "input",
            label: this.$t('ex.adjgrosswgt'),
            props: "adjgrosswgt",
            disabled: true,
            break:true
          },
          {
            type: "input",
            label: this.$t('ex.targetqty'),
            props: "targetqty",
            disabled: true
          },
          {
            type: "input",
            label: this.$t('ex.qtyselected'),
            props: "qtyselected",
            disabled: true
          },
          {
            type: "input",
            label: this.$t('ex.actualtarewgt'),
            props: "actualtarewgt",
            disabled: true
          },
          {
            type: "input",
            label: this.$t('ex.adjtarewgt'),
            props: "adjtarewgt",
            disabled: true,
            break:true
          },
          {
            type: "textarea",
            label: this.$t('common.note'),
            props: "notes",
          },
      ]
    }
  },
  methods: {
    change(row,index){
        this.serialList[index].adjustmentCategory = 14104;
        if(this.serialList[index].serialNumber == this.serialList[index].oldKey){
          this.serialList[index].adjustmentCategory = 14101;
        }
        this.$emit('update:serialArr',this.serialList)
    },
    remove1(row){
        this.serialList.find(item => item.serialNumber == row.serialNumber).adjustmentCategory = 14103
        this.$emit('update:serialArr',this.serialList)
    },
    remove2(row,index){
      if(row.adjustmentCategory == 14102){
        this.serialList.splice(index,1)
        this.$emit('update:serialArr',this.serialList)
      }
    },
    revocation(row){
        this.serialList.find(item => item.serialNumber == row.serialNumber).adjustmentCategory = 14101
        this.$emit('update:serialArr',this.serialList)
    },
    handleAddSerial(){
        this.serialList.push({serialNumber:"",serialNumberUnit:1,adjustmentCategory:14102,adjustmentLinenumber:this.data.detailData.adjustmentlinenumber});
        this.$emit('update:serialArr',this.serialList);
    },
    setdata(data, close, listId) {
      this.$set(this.data.detailData, "sku", data.sku)
      this.$set(this.data.detailData, "loc", data.loc)
      this.$set(this.data.detailData, "lot", data.lot)
      this.data.detailData.id = data.id;
      this.data.detailData.currentqty = data.qty;
      this.data.argument.serialkey = data.serialkey;
      this.getSerialList()
      close(false);
    },
    async getId() {
      if(!this.data.detailData.adjustmentlinenumber){
        try {
          let res = await this.$api.get(`/getMaxAdjustmentlinenumber/undefined`);
          
            this.data.detailData.adjustmentlinenumber = res.bean;
          
        } catch (e) {
          this.$message.error(e);
        }
      }
    },
    getSerialList(){
      if(!this.addflag&&this.data.argument.serialkey){
        const inventoryId = this.data.argument.serialkey;
        this.$get(`/queryAdjustmentDetailSerialByInventoryId/${inventoryId}`).then(res => {
          this.serialList = res.data.map(item => {item.oldKey = item.serialNumber;return item});
          if(this.serialList.length > 0){
            this.showSerialList = true
          }else{
            this.showSerialList = false
          }
          this.$emit('update:serialArr',this.serialList,this.showSerialList)
        })
      }else{
        const adjustmentkey = this.data.argument.adjustmentkey;
        const adjustmentlinenumber = this.data.detailData.adjustmentlinenumber;
        this.$post(`/queryAdjustmentDetailSerialList`,{adjustmentkey,adjustmentlinenumber}).then(res => {
          this.serialList = res.data.map(item => {item.oldKey = item.serialNumber;return item})
          if(this.serialList.length > 0){
            this.showSerialList = true
          }else{
            this.showSerialList = false
          }
          this.$emit('update:serialArr',this.serialList,this.showSerialList)
        })
      }
    }
  },
  mounted() {
    console.log(this.$store.state);
    if (Object.keys(this.$store.state.skip).length !== 0) {
      let data = this.$store.state.skip;
      if (!data.newFlag) {
        this.addflag = true;
      } else {
        this.addflag = false;
      }
    } else if (this.$store.state.newFlag || this.$parent.detailsNew) {
      this.addflag = false;
    } else {
      this.addflag = true;
    }
    this.getSerialList()
    this.getId();
  },
  watch: {
    serialList:{
      handler(data){
        if(data.length > 0){
          const serialTotal = data.filter(item => item.adjustmentCategory != 14103).reduce((pre,cur) => pre + cur.serialNumberUnit,0);
          console.log(this.data.detailData,serialTotal);
          const adjustTotal = this.data.detailData.currentqty - serialTotal;
          if(adjustTotal > 0){
            this.data.detailData.adjustmentType = '14002'
          }else if(adjustTotal < 0){
            this.data.detailData.adjustmentType = '14001'
          }else if(adjustTotal == 0){
            this.data.detailData.adjustmentType = '14003'
          }
          this.data.detailData.qty = Math.abs(adjustTotal);
        }
      },
      deep:true
    }
  },
  components: {
    'v-details': details
  }
}
</script>

<style scss scoped>
.info-wrap{
  border: 1px solid #e3e3e3;
  float:left;
  width:60%;
}
.editor-group{
  border: 1px solid #e3e3e3;
  overflow:hidden;
}
</style>
